<template>
  <div class="footer">
    <div class="footer-top">
      <h4>健康咨询</h4>
      <p>更多</p>
    </div>
    <div class="item" v-for="item in data" :key="item.id">
      <div class="item-header">
        <p>
          {{ item.title }}
        </p>
        <div
          style="
            width: 70px;
            height: 70px;
            background-color: rgb(226, 244, 255);
            border-radius: 10px;
          "
        ></div>
      </div>
      <div class="item-footer">
        <span style="color: rgb(0, 144, 255);margin-top: 20px;" >#{{ item.tag }}</span>
        <span>
          <img src="@/assets/tabs/tag.png" alt="" style="margin-right: 10px;margin-top: 10px;"/>
          <span>
            {{ item.like }}
          </span>
        </span>
        <span style="display: flex;justify-content: center;align-items: center;">
          <img src="@/assets/tabs/eye.png" alt="" style="margin-right: 10px;margin-top: 10px;"/>
          <span>
            {{ item.read }}
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref([
  {
    id: 1,
    title: "世界糖尿病日,应该注意什么来调节?",
    // 标签
    tag: "健康养生",
    // 点赞
    like: 299,
    // 阅读量
    read: 2000,
  },
  {
    id: 2,
    title: "世界糖尿病日,应该注意什么来调节?",
    // 标签
    tag: "健康养生",
    // 点赞
    like: 999,
    // 阅读量
    read: 3000,
  },
]);
</script>

<style scoped lang="scss">
.footer {
  height: 400px;
  background-color: rgb(240, 247, 253);
  .footer-top {
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 16px;
    }
  }
  .item {
    width: 90%;
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: white;
    margin-left: 2%;
    margin-top: 10px;
    border-radius: 10px;
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 16px;
      }
    }
    .item-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 12px;
        margin-top: 10px;
      }
    }
  }
}
</style>